<template>
  <div class="fiz-eim-project">
    <div class="project-detail-panel">
      <ProjectList v-if="showProject" :handleNodeClick="handleNodeClick" @toTask="toTask"></ProjectList>
      <ProjectItem v-else ref="projectItemRef" :project-info="projectInfo" @toProject="toProject"></ProjectItem>
    </div>
  </div>
</template>

<script setup>
import { getProjectDetail } from '@/assets/api/project'
import { useRoute, useRouter } from 'vue-router'
import useProject from '@/store/project'
import { ElMessage } from 'element-plus'

const projectStore = useProject()

const route = useRoute()
const router = useRouter()

const showProject = ref(true)

const projectId = computed(() => {
  return route.params.projectId
})
const projectItemRef = ref()
const projectInfo = ref({})

function toTask(data) {
  showProject.value = false
  handleNodeClick(data)
}
function toProject() {
  showProject.value = true
  handleNodeClick()
}

function handleNodeClick(node) {
  if (node?.projectCode) {
    projectInfo.value = node
    projectInfo.value.treeParentNode = ''
    projectStore.setProjectInfo(node)
    router.push({ path: `/chat/project/${node.projectId}` })
  } else {
    projectInfo.value = {}
    projectStore.setProjectInfo({})
    router.push(`/chat/project`)
  }
}

function getProjectDetailData(id) {
  getProjectDetail(id).then((res) => {
    if (res.code === 200) {
      projectInfo.value = res.data
      showProject.value = false
      projectStore.setProjectInfo(projectInfo.value)
    } else {
      ElMessage.error(res.msg)
    }
  })
}

watch(
  projectId,
  (v) => {
    if (v) {
      // 项目跳转
      if (!projectInfo.value?.projectId) {
        getProjectDetailData(v)
      }
    }
  },
  {
    immediate: true,
  }
)
</script>

<style scoped lang="scss">
.fiz-eim-project {
  @include use-flex();
  height: 100%;
  // background-color: var(--elp-bg-color-page);
  background-color: var(--elp-color-info-light-9);
  padding: 16px;
  .project-tree-panel {
    height: 100%;
    width: 265px;
    padding: 22px 12px;
    border-radius: 12px;
    background-color: var(--elp-bg-color);
    .project-tree-panel-head {
      @include use-flex(center);
      .project-search {
        // --elp-input-bg-color: var(--elp-fill-color-light);
        margin-right: 10px;
        :deep(.elp-input__wrapper) {
          // box-shadow: none;
        }
      }
      .project-add {
        @include use-flex(center, center);
        cursor: pointer;
        height: 32px;
        width: 32px;
        border-radius: 6px;
        flex-shrink: 0;
        background-color: var(--elp-fill-color-light);
      }
    }
    .project-tree-panel-body {
      height: calc(100% - 15px - 32px);
      margin-top: 15px;
      overflow: hidden auto;
    }
  }
  .project-detail-panel {
    height: 100%;
    width: 100%;
  }
}
</style>
